<template>
  <div class="container" @mouseover="mouseOver" @mouseout="mouseOut">
    <div class="fixedToTop">
      <CommonTitle><p slot="title">明星教师</p></CommonTitle>
      <table>
        <thead>
          <tr>
            <th style="width: 105px">教师头像</th>
            <th style="width: 120px">教师姓名</th>
            <th style="width: 110px">简介</th>
            <th>上传人</th>
          </tr>
        </thead>
      </table>
    </div>
    <table>
      <tbody :class="{ anim: myanimate == true }">
        <tr v-for="(item, index) in showList" :key="index">
          <td style="width: 105px">
            <img :src="item.iconurl" alt="" />
          </td>
          <td style="width: 120px">{{ item.teachername }}</td>
          <td style="width: 110px">{{ item.intro }}</td>
          <td>{{ item.uploadperson }}</td>
        </tr>
      </tbody>
    </table>
    <div
      class="decHeart"
      :style="{ backgroundImage: 'url(' + imgSrc1 + ')' }"
    ></div>
  </div>
</template>

<script>
import CommonTitle from "./CommonTitle";
export default {
  components: {
    CommonTitle,
  },
  props: ["teacherData"],
  data() {
    return {
      showList: [],
      myanimate: Boolean,
      imgSrc1: require("@/assets/HomeViewImages/decpic/heart.gif"),
      // tableData: [
      //   {
      //     iconurl: require("@/assets/HomeViewImages/starteacher/main-jiaoshi.png"),
      //     teachername: "JASON",
      //     intro: "英语外教",
      //     uploadperson: "Dasiy",
      //   },
      // ],
    };
  },
  mounted() {
    this.timer = setInterval(this.scroll, 2000);
  },
  watch: {
    teacherData(newV, oldV) {
      var arr = JSON.parse(JSON.stringify(newV));
      this.showList = arr;
    },
  },
  methods: {
    scroll() {
      this.myanimate = true; // 因为在消息向上滚动的时候需要添加css3过渡动画，所以这里需要设置true
      setTimeout(() => {
        //  这里直接使用了es6的箭头函数，省去了处理this指向偏移问题，代码也比之前简化了很多
        this.showList.push(this.showList[0]); // 将数组的第一个元素添加到数组的最后
        this.showList.shift(); //删除数组的第一个元素
        this.myanimate = false; // margin-top 为0 的时候取消过渡动画，实现无缝滚动
      }, 1000);
    },
    mouseOver() {
      // console.log("鼠标悬停");
      // this.myanimate = false;
      clearInterval(this.timer);
    },
    mouseOut() {
      // this.myanimate = true;
      this.timer = setInterval(this.scroll, 2000);
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  box-sizing: border-box;
  padding: 0 24px;
  height: 100%;
  overflow-y: scroll;
  position: relative;
  background-color: #fff;
  // 隐藏滚动条
  &::-webkit-scrollbar {
    width: 0 !important;
  }
  & {
    -ms-overflow-style: none;
  }
  & {
    overflow: -moz-scrollbars-none;
  }

  &:hover h3 {
    color: #438afe;
  }
  h3 {
    margin-bottom: 20px;
  }
  .fixedToTop {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 2000;
    background-color: #fff;
    padding-top: 24px;
  }

  table {
    box-sizing: border-box;
    padding: 0 20px;
    text-align: center;
    width: 100%;
    th {
      font-size: 16px;
      line-height: 26px;
      font-family: "微软雅黑";
      font-weight: bold;
      color: #333333;
      // &:nth-of-type(1),
      // &:nth-of-type(2) {
      //   text-align: left;
      //   padding-left: 20px;
      // }
    }
    .anim {
      transition: all 1s;
      margin-top: -80px;
    }
    tbody {
      tr {
        height: 74px;
        line-height: 60px;

        &:nth-of-type(1) {
          border: 2px dashed pink;
          td {
            font-weight: 600;
            font-size: 18px !important;
            color: #ea8a5f !important;
            text-shadow: 0px 0px 1px #151945;
          }
        }

        td {
          padding: 10px 0;
          font-size: 14px;
          font-family: "微软雅黑";
          color: #333333;
        }

        img {
          width: 56px;
          height: 56px;
          border-radius: 50%;
          vertical-align: middle;
          border: 1px solid rgba(35, 67, 126, 0.515);
        }
      }
    }
  }
  .decHeart {
    width: 50px;
    height: 50px;
    // border: 1px solid #333;
    position: absolute;
    z-index: 3000;
    right: 46%;
    top: 64px;

    background-repeat: no-repeat;
    background-size: 180px 180px;
    background-position: center center;

    transform: rotate(10deg);
    -ms-transform: rotate(10deg); /* IE 9 */
    -webkit-transform: rotate(10deg); /* Safari and Chrome */
  }
}
</style>